<!--
    * @FileDescription: 品牌管理
    * @Author: kahu
    * @Date: 2022/8/29
    * @LastEditors: kahu
    * @LastEditTime: 2022/8/29
-->
<template>
  <div class="content">
    <el-row :gutter="10" class="padding-bottom">
      <el-col :span="24">
        <el-button type="primary" @click="formOption.show = true">新增</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%"
    >
      <el-table-column
        header-align="center"
        align="center"
        prop="brandName"
        label="品牌名称"
        width="180"
      />
      <el-table-column
        header-align="center"
        align="center"
        prop="brandLogo"
        label="Logo"
      >
        <template v-slot="scope">
          <el-image :src="scope.row.brandLogo" :preview-src-list="[scope.row.brandLogo]" style="width: 100px;height: 100px" />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="相关操作"
        header-align="center"
      >
        <template v-slot="scope">
          <el-button style="margin-right: 10px" type="warning" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-popconfirm
            title="确定删除吗？"
            @confirm="handleDelete(scope.row)"
          >
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="query.page"
      :page-sizes="tableOptions.pageSizes"
      :page-size="query.pageSize"
      :layout="tableOptions.layout"
      :total="tableOptions.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <Form v-model="formOption.show" :item="formOption.item" @confirm="getList" @cancel="getList" />
  </div>
</template>

<script>
import { getBrandAll, deleteBrand } from '@/api/renovation';
import Form from './form'
export default {
  name: 'Brand',
  components: { Form },
  data () {
    return {
      list: [],
      query: {
        page: 0,
        pageSize: 10
      },
      tableOptions: {
        total: 0,
        layout: 'total, sizes, prev, pager, next, jumper',
        pageSizes: [10, 30, 50, 100, 200]
      },
      formOption: {
        show: false,
        item: null
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      this.loading = true
      const { data } = await getBrandAll(this.query);
      this.loading = false
      this.list = data.list
      this.tableOptions.total = data.total
    },
    handleSizeChange (val) {
      this.query.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.getList()
    },
    handleUpdate (item) {
      this.formOption.item = item
      this.formOption.show = true
    },
    async handleDelete (item) {
      this.loading = true
      await deleteBrand(item)
      this.loading = false
      this.$message.success('删除成功')
      this.getList()
    }
  }
}
</script>

<style
  lang="scss"
  scoped
>
.content{
  padding: 30px;
}
.padding-bottom{
  padding-bottom: 30px;
}
</style>
